.root {
    @apply relative grid grid-cols-1 items-start gap-1 overflow-x-hidden;
    min-height: auto;
}

.main {
    @apply relative col-span-1 box-border flex  flex-col px-0 pb-0;
    min-height: 500px;
}

.header {
    @apply absolute top-0 left-0
  z-20 pr-16 transition-colors duration-500 ease-in-out;
}

.header .name {
    @apply leading-extra-loose w-full max-w-full pt-0;
    font-size: 2rem;
    letter-spacing: 0.4px;
}

.header .name span {
    @apply bg-primary text-primary py-4 px-6 font-bold;
    font-size: inherit;
    letter-spacing: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.header .price {
    @apply bg-primary text-accent-9 inline-block px-6 pt-2 pb-4
  text-sm font-semibold tracking-wide;
}

.sidebar {
    @apply max-w-8xl col-span-1 mx-auto flex h-full w-full flex-col px-6 py-6;
}

.sliderContainer {
    @apply bg-violet flex items-center justify-center overflow-x-hidden;
}

.imageContainer {
    @apply text-center;
}

.imageContainer > div,
.imageContainer > div > div {
    @apply h-full;
}

.sliderContainer .img {
    @apply h-auto max-h-full w-full object-cover;
}

.button {
    @apply bg-secondary w-full;
}

.wishlistButton {
    @apply absolute top-0 right-0 z-30;
}

.relatedProductsGrid {
    @apply grid grid-cols-2 gap-2 py-2 md:grid-cols-4 md:gap-7;
}

@screen lg {
    .root {
        @apply grid-cols-12;
    }

    .main {
        @apply col-span-8 mx-0;
    }

    .sidebar {
        @apply col-span-4 py-6;
    }

    .imageContainer {
        max-height: 600px;
    }
}
